<template>
  <div class="con-l-body-item" @click="click">
    <div class="wrap">
      <img :src="bodyItem.pic" alt="">
      <div class="content">
        <p class="content-title">{{ bodyItem.name }}</p>
        <p>{{ bodyItem.pub }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'ConLItem',
  props: ['bodyItem'],
  methods: {
    click() {
      this.$bus.$emit('tabTitle', this.bodyItem.name)
      this.getRankSong({ bandId: this.bodyItem.sourceid })
      this.$bus.$emit('getRankId', this.bodyItem.sourceid)
    },
    ...mapActions('rank', ['getRankSong'])
  }

}
</script>

<style lang="less" scoped>
  .con-l-body-item {
    padding: 0 20px;
    width: 210px;
    cursor: pointer;
    .wrap {
      display: flex;
      align-items: center;
      width: 210px;
      height: 80px;
      img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }
      .content{
        display: flex;
        height: 46px;
        flex-direction: column;
        justify-content: space-around;
        p {
          font-size: 14px;
          color: #999;
          &.content-title {
            color: #333;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>
